<template>
  <div class="setting-share">
    <div class="set-share-left">
      <div class="weixin-box sha1">
        <img :src="`${env.publicPath}images/wx-1.jpg`" alt="">
        <div class="weixin-box-con">
          <ul class="wx-list">
            <li :key="index" class="wx-item" v-for="(item, index) in preShareLists">
              <div class="wx-blogger">
                <img :src="share.icon" alt="">
              </div>

              <div class="wx-con sha1 flow-left-in">
                <!-- <p>{{item}}</p> -->
                <p class="wx-con-title txt_break txt_ellipsis">{{item.type=='微博'?item.desc:item.title}}</p>
                <p class="wx-con-desc">
                  <span class="txt_break txt_ellipsis">{{item.type=='微博'?item.title:item.desc}}</span>
                  <i> <img :src="share.icon" alt=""> </i>
                </p>
                <p class="wx-con-from">{{item.type}}</p>
                <i class="wx-con-arrow"></i>
              </div>
            </li>
          </ul>
        </div>
        <img :src="`${env.publicPath}images/wx-0.png`" alt="">
      </div>
    </div>

    <div class="set-share-right">
      <setting-share-all @change="changeShareAll" :share="share"></setting-share-all>

      <div class="share-wx-style">
        <div class="share-wx-style-title style-title">
          <el-checkbox class="style-title-cb" v-model="share.bIsWxChecked" @change="onChange">设置微信分享时样式</el-checkbox>
          <el-button :disabled="!share.bIsWxChecked" class="style-title-preshow" icon="Search" @click.stop="click2Preview('WX')">查看效果</el-button>
        </div>

        <div v-show="share.bIsWxChecked" class="share-wx-style-con style-con">
          <p class="style-txt">
            <label>标题设置</label>
            <el-input
              type="input"
              resize="none"
              :rows="1"
              placeholder="请输入内容"
              v-model="state.wxTitle"
              @change="check4Input('wxTitle', state_.titleCount)">
            </el-input>
            <span :class="{'is-over': state.wxTitle.length>state_.titleCount}">{{state.wxTitle.length}}/{{state_.titleCount}}</span>
          </p>

          <p class="style-txt">
            <label>描述设置</label>
            <el-input
              type="textarea"
              resize="none"
              :rows="2"
              placeholder="请输入内容"
              v-model="state.wxDesc"
              @change="check4Input('wxDesc', state_.descCount)">
            </el-input>
            <span :class="{'is-over': state.wxDesc.length>state_.descCount}">{{state.wxDesc.length}}/{{state_.descCount}}</span>
          </p>
        </div>
      </div>

      <div class="share-wb-style">
        <div class="share-wb-style-title style-title">
          <el-checkbox class="style-title-cb" v-model="share.bIsWbChecked" @change="onChange">设置微博分享时样式</el-checkbox>
          <el-button :disabled="!share.bIsWbChecked" class="style-title-preshow" icon="Search" @click.stop="click2Preview('WB')">查看效果</el-button>
        </div>

        <div v-show="share.bIsWbChecked" class="share-wb-style-con style-con">
          <p class="style-txt">
            <label>标题设置</label>
            <el-input
              type="input"
              resize="none"
              :rows="1"
              placeholder="请输入内容"
              v-model="state.wbTitle"
              @change="check4Input('wbTitle', state_.titleCount)">
            </el-input>
            <span :class="{'is-over': state.wbTitle.length>state_.titleCount}">{{state.wbTitle.length}}/{{state_.titleCount}}</span>
          </p>

          <p class="style-txt">
            <label>描述设置</label>
            <el-input
              type="textarea"
              resize="none"
              :rows="2"
              placeholder="请输入内容"
              v-model="state.wbDesc"
              @change="check4Input('wbDesc', state_.descCount)">
            </el-input>
            <span :class="{'is-over': state.wbDesc.length>state_.descCount}">{{state.wbDesc.length}}/{{state_.descCount}}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SettingShareAll from '@/views/child/setting/setting-share-all.vue'
import { useWebSiteStore } from '@/store/web/site'


const useWebSite = useWebSiteStore()
const share = computed(() => {
  return useWebSite.attrs.share
})
const preShareLists = [
  {
    title: 'aaa',
    desc: 'aaa',
    type: ''
  },
]
const state = reactive({
  item: {
    uploadTxt: '',
    type: '',
  },
  wxTitle: '',
  wxDesc: '',
  wbTitle: '',
  wbDesc: '',
})
const state_ = {
  titleCount: 48,
  descCount: 60,
}
const onChange = () => {
  const share = useWebSite.attrs.share;
  share.wxShare.title = state.wxTitle;
  share.wxShare.desc = state.wxDesc;
  share.wbShare.title = state.wbTitle;
  share.wbShare.desc = state.wbDesc;
  useWebSite.updateSettingShare(share);
}

const changeShareAll = () => {
  const share = useWebSite.attrs.share;
  preShareLists[0].title = share.allShare.title;
  preShareLists[0].desc = share.allShare.desc;
  preShareLists[0].type = '微博';
}
const check4Input = (valType: string, count: number) => {
  state[valType] = state[valType].substring(0, count);
  onChange();
}
const click2Preview = (type: string) => {
  const share = useWebSite.attrs.share;
  switch(type) {
    case 'WX': {
      let data = {
        title: share.wxShare.title,
        desc: share.wxShare.desc,
        type: '微信',
      };
      preShareLists.push(data);
      break;
    }
    case 'WB': {
      let data = {
        title: share.wbShare.title,
        desc: share.wbShare.desc,
        type: '微博',
      };
      preShareLists.push(data);
      break;
    }
    default: {
      break;
    }
  }
  window.setTimeout(() => {
    let parentEl: any = document.querySelector(".weixin-box-con");
    let childEl: any = document.querySelector(".wx-list");
    parentEl.scrollTop = childEl.getBoundingClientRect().height;
  }, 300);
}
const initComp = () => {
  const share = useWebSite.attrs.share;
  state.wxTitle = share.wxShare.title;
  state.wxDesc = share.wxShare.desc;
  state.wbTitle = share.wbShare.title;
  state.wbDesc = share.wbShare.desc;
  changeShareAll();
}

initComp();
</script>

<style lang="scss">
  .setting-share{
    position: relative;
    display: flex;
  }

  .set-share-left{
    position: relative;
    width: 328px;
    height: 517px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #E4E7EB;

    .weixin-box{
      position: relative;
      width: 257px;
      height: 475px;
      display: flex;
      flex-direction: column;
      background: #EBEBEB;

      .weixin-box-con{
        position: relative;
        width: 100%;
        min-height: 0;
        overflow: auto;
        flex: 1;
      }
      .weixin-box-con::-webkit-scrollbar{
        width: 1px;
      }

      img{
        display: block;
        width: 100%;
        height: auto;
      }
    }
  }

  .set-share-right{
    position: relative;
    min-width: 0;
    max-height: 517px;
    overflow: auto;
    flex: 1;

    .share-all-style{
      position: relative;
      display: flex;
      padding: 22px 56px 22px 37px;

      .share-all-style-pic{
        position: relative;
        width: 102px;
        height: 102px;

        .share-all-style-pic-upload{
          position: absolute;
          width: 100%;
          height: 100%;
          opacity: 0;

          div{
            width: 100%;
            height: 100%;
          }
        }

        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        a{
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          font-size: 10px;
          color: #fff;
          background-color: rgba(67, 71, 92, 0.5);
          padding: 4px 0;
          text-align: center;
        }
      }

      .share-all-style-txt{
        min-width: 0;
        flex: 1;
        margin-left: 12px;

        p:first-child{
          margin-bottom: 10px;
        }
      }
    }

    .share-wx-style, .share-wb-style{
      padding: 0 56px 0 37px;
      margin-bottom: 30px;
    }
    .share-wx-style-con{
      height: 181px;
      padding-right: 45px;
    }
    .share-wb-style-con{
      height: 136px;
      padding-right: 45px;
    }

    .style-title{
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .style-title-cb{
      font-size: 14px;
      color: #43475C;
      letter-spacing: 0.97px;
    }
    .style-title-preshow{
      font-size: 12px;
      padding: 3px 11px !important;
      border-radius: 2px !important;
    }
    .style-txt{
      position: relative;
      font-size: 12px;
      display: flex;

      .el-textarea, .el-input{
        font-size: 12px !important;
        flex: 1;
        min-width: 0;

        input{
          height: 30px !important;
          line-height: 30px !important;
          padding-right: 38px;
        }

        textarea{
          line-height: 2 !important;
        }
      }

      label{
        width: 72px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #43475C;
      }

      span{
        position: absolute;
        right: 6px;
        bottom: 2px;
        font-size: 12px;
        color: #A5AFBE;
        line-height: 25px;
      }

      .is-over{
        color: #eb3c2a !important;
      }
    }
    .style-con{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      justify-content: space-evenly;
      background-color: #F3F5FA;
      border-radius: 2px;
    }
  }

  .wx-list{
    padding-top: 40px;
  }
  .wx-item{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    margin-bottom: 30px;

    .wx-blogger{
      width: 30px;
      height: 30px;
      margin-right: 10px;

      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .wx-con{
      position: relative;
      width: 160px;
      background-color: #fff;
      border-radius: 5px;
      margin-right: 10px;

      .wx-con-title{
        font-size: 14px;
        color: #333;
        font-weight: bold;
        -webkit-line-clamp: 2;
        padding: 8px 8px 0 8px;
        line-height: 1.3;
      }

      .wx-con-desc{
        display: flex;
        padding: 8px 8px 0 8px;
        margin-bottom: 8px;

        span{
          min-width: 0;
          flex: 1;
          font-size: 12px;
          color: #A5AFBE;
          -webkit-line-clamp: 2;
          line-height: 1.3;
        }

        i{
          display: inline-block;
          width: 30px;
          height: 30px;

          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      .wx-con-from{
        font-size: 12px;
        color: #A5AFBE;
        line-height: 1.5;
        padding-left: 20px;
        border-top: 1px solid #eee;
      }

      .wx-con-arrow{
        position: absolute;
        display: block;
        top: 10px;
        right: -2px;
        width: 7px;
        height: 7px;
        transform: rotateZ(45deg);
        background: #fff;
      }
    }
  }
</style>
